<template>
  <div class="hezi">
    <div class="anniu">
      <el-button type="primary" icon="el-icon-plus" @click="xinjian">新建</el-button>
      <el-button icon="el-icon-minus" @click="shanchu">删除</el-button>
      <el-button type="primary" @click="shuaxin">刷新</el-button>
      <el-button type="primary" class="anniu-a" @click="daoru">导入客户</el-button>
    </div>
    <el-dialog :visible.sync="xiazai">
      <el-button type="primary" @click="shangchuan"><input ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="shangc"></el-button>
      <el-button type="primary" @click="xiazaimoban">下载模板表</el-button>
    </el-dialog>
    <div class="anniu xiala">
      <el-select v-model="select" placeholder="客户类型" class="leixing">
        <el-option label="公司" value="Company" />
        <el-option label="个人" value="Personal" />
        <el-option label="虚拟" value="Virtual" />
        <el-option label="内部" value="Internal" />
      </el-select>
      <el-input v-model="searchValue" placeholder="客户编号或名称" class="bianhao" />
      <el-button type="primary" style="margin-left: 10px;" @click="chaxun">查询</el-button>
      <el-button @click="chongzhi">重置</el-button>
    </div>
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="客户编号"
          width="250"
        >
          <template slot-scope="scope">{{ scope.row.Code }}</template>
        </el-table-column>
        <el-table-column
          prop="Name"
          label="客户名称"
          width="250"
        >
          <template v-slot="{row}">{{ row.Name }} </template>
        </el-table-column>
        <el-table-column
          prop="Type"
          label="客户类型"
          show-overflow-tooltip
          width="250"
        ><template v-slot="{row}">{{ row.Type }} </template></el-table-column>
        <el-table-column
          prop="Phone"
          label="电话"
          show-overflow-tooltip
          width="120"
        ><template v-slot="{row}">{{ row.Phone }} </template></el-table-column>
        <el-table-column
          prop="Fax"
          label="传真"
          show-overflow-tooltip
          width="120"
        ><template v-slot="{row}">{{ row.Fax }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="Email"
          show-overflow-tooltip
          width="120"
        ><template v-slot="{row}">{{ row.Email }} </template></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="dizhi(scope.row)">地址</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block yeshu">
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :current-page="currentPage"
          :total="total"
          :page-size="pageSize"
        />
      </div> -->
      <!-- <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->

      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="编号名称">
            <el-input v-model="form.Code" autocomplete="off" plain disabled />
          </el-form-item>
          <el-form-item label="活动名称" prop="Name">
            <el-input v-model="form.Name" />
          </el-form-item>
          <el-form-item label="客户类型" prop="Type">
            <el-select v-model="form.Type" placeholder="客户类型">
              <el-option label="个人" value="individual" />
              <el-option label="公司" value="Company" />
              <el-option label="虚拟" value="dummy" />
              <el-option label="内部" value="interior" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.Phone" />
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-model="form.Fax" />
          </el-form-item>
          <el-form-item label="Email">
            <el-input v-model="form.Email" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.Remarks" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="dialogTitle==='新增客户'" type="primary" @click="queding">确 定</el-button>
          <el-button v-else type="primary" @click="xiugai">修 改</el-button>
        </div>
      </el-dialog>
      <el-drawer
        size="1300px"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
      ><!-- 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
        <div class="hezi">
          <div class="anniu">
            <el-button type="primary" icon="el-icon-plus" @click="xinjians">新建</el-button>
            <el-button icon="el-icon-minus" @click="shanchus">删除</el-button>
            <el-button type="primary" @click="shuaxin">刷新</el-button>
          </div>
          <div class="biaoges">
            <el-table
              ref="multipleTable"
              v-loading="loading"
              :data="lists"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChanges"
            >
              <el-table-column
                type="selection"
                width="40"
              />
              <el-table-column
                label="编号"
                width="120"
              >
                <template slot-scope="scope">{{ scope.row.Code }}</template>
              </el-table-column>
              <el-table-column
                prop="Name"
                label="名称"
                width="120"
              >
                <template v-slot="{row}">{{ row.Name }} </template>
              </el-table-column>
              <el-table-column
                prop="Address"
                label="地址"
                show-overflow-tooltip
                width="120"
              ><template v-slot="{row}">{{ row.Address }} </template></el-table-column>
              <el-table-column
                prop="Remarks"
                label="备注"
                show-overflow-tooltip
                width="120"
              ><template v-slot="{row}">{{ row.Remarks }} </template></el-table-column>
              <el-table-column
                prop="Fax"
                label="状态"
                show-overflow-tooltip
                width="120"
              ><template v-slot="{row}"><el-switch
                v-model="row.IsEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
              /> </template></el-table-column>
              <el-table-column
                prop="Email"
                label="默认"
                show-overflow-tooltip
                width="120"
              ><template v-slot="{row}"><el-switch
                v-model="row.IsDefault"
                active-color="#13ce66"
                inactive-color="#ff4949"
              /></template></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClicks(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="opens(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-dialog :title="dialogTitles" :visible.sync="dialogFormVisibles">
              <el-form :model="forms" label-width="120px">
                <el-form-item label="活动名称">
                  <el-input v-model="forms.Code" />
                </el-form-item>
                <el-form-item label="电话">
                  <el-input v-model="forms.Name" />
                </el-form-item>
                <el-form-item label="传真">
                  <el-input v-model="forms.Address" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="forms.Remarks" type="textarea" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <!-- <el-button type="primary" @click="quedings">确 定</el-button> -->
                <el-button v-if="dialogTitles==='添加地址'" type="primary" @click="quedings">确 定</el-button>
                <el-button v-else type="primary" @click="xiugais">修 改</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import { gatList, delList, newList, editList, SaveList, checkList, QueryDataList, SaveDataList, delData, GetTheData, ExportToExcel, shangExcel } from '@/api/kehuguanli'
import FileSaver from 'file-saver'
export default {
  name: 'KehuManage',
  data() {
    return {
      currentPage: 1, // 初始页
      total: 5, // 分页总条数
      pageSize: 10, // 每页的数据
      value: '',
      drawer: false,
      direction: 'rtl',
      list: [],
      lists: [],
      select: {},
      input: '',
      www: '',
      wwws: '',
      loading: false,
      dialogTitle: '',
      dialogTitles: '',
      xialakuang: '',
      xiazai: false,
      form: {
        Code: '',
        Name: '',
        Type: '',
        Phone: '',
        Fax: '',
        Email: '',
        Remarks: ''
      },
      forms: {
        Code: '',
        Name: '',
        Address: '',
        Remarks: '',
        CusId: ''
      },
      searchValue: '',
      dialogFormVisible: false,
      dialogFormVisibles: false,
      multipleSelection: '',
      multipleSelections: '',
      rowId: '',
      rules: {
        Name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        Type: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.listget()
  },
  methods: {
    async shangc(event) {
      const files = event.target.files
      if (files.length > 0) {
        const data = new FormData()
        files[0]
        data.append('file', files[0])
        await shangExcel(data)
      }
    },
    shangchuan() {
      this.$refs['excel-upload-input'].click()
    },
    async xiazaimoban() {
      const res = await ExportToExcel()
      FileSaver.saveAs(res, '模板.xlsx')
    },
    daoru() {
      this.xiazai = true
    },
    async opens(row) {
      this.rowId = row.Id
      await delData([row.Id])
      this.dataget()
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
    },
    async quedings() {
      this.dialogTitles = '添加地址'
      await SaveDataList(this.forms)
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.dialogFormVisibles = false
      this.dataget()
    },
    async xiugais() {
      await SaveDataList(this.forms)
      this.$message({
        type: 'success',
        message: '编辑成功!'
      })
      this.dialogFormVisibles = false
      this.dataget()
    },
    async dizhi(row) {
      this.forms.CusId = row.Id
      this.drawer = true
      const res = await QueryDataList({ PageIndex: 1, PageRows: 10, SortField: 'Id', SortType: 'asc', search: { CusId: this.forms.CusId, SupId: '' }})
      this.lists = res
    },
    xinjians() {
      this.dialogFormVisibles = true
    },
    chongzhi() {
      this.input = ''
      this.listget()
    },
    async chaxun() {
      const res = await checkList({ PageIndex: 1, PageRows: 10, search: { Type: this.select }})
      this.list = res
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async xiugai() {
      await SaveList(this.form)
      this.$message({
        type: 'success',
        message: '编辑成功!'
      })
      this.dialogFormVisible = false
      this.listget()
    },
    xinjian() {
      this.dialogTitle = '新增客户'
      this.dialogFormVisible = true
    },
    async handleClick(row) {
      this.dialogTitle = '编辑客户'
      // 弹窗
      this.dialogFormVisible = true
      this.www = Object.assign({}, row)
      const form = await editList(this.www)
      this.form = form
      console.log(form)
    },
    async handleClicks(row) {
      // 弹窗
      this.dialogFormVisibles = true
      this.wwws = Object.assign({}, row)
      const forms = await GetTheData(this.wwws)
      this.forms = forms
    },
    shuaxin() {
      this.loading = true
      this.listget()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    async shanchu() {
      await delList(Object.values(...this.multipleSelection))
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.listget()
    },

    async shanchus() {
      await delData(Object.values(...this.multipleSelections))
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.dataget()
    },
    async queding() {
      await newList(this.form)
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.dialogFormVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSelectionChanges(val) {
      this.multipleSelections = val
    },
    async listget() {
      const res = await gatList()
      this.list = res
    },
    async dataget() {
      const res = await QueryDataList({ PageIndex: 1, PageRows: 10, SortField: 'Id', SortType: 'asc', search: { CusId: this.forms.CusId, SupId: '' }})
      this.lists = res
    },
    open(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delList(Object.values(row))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listget()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
.yeshu{
  margin-left: 1200px;
  margin-top: 20px;
}
.biaoge{
  margin-left: 30px;
  margin-top: 20px;
  width: 1590px;
}
.biaoges{
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
}
.bianhao{
  width: 250px;
  margin-left: 10px;
}
.hezi {
  width: 1650px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}
.anniu {
  margin-left: 30px;
  margin-top: 20px;
}
.xiala {
  margin-top: 40px;
}
.anniu-a {
  margin-left: 1100px;
  margin-top: 20px;
}
.leixing{
  width: 250px;
}
</style>
